<template>
  <!-- 这个文件里是所有的审核页面，包括弹窗和页面 -->
  <div style>
    <div class="comTitle clearfix">
      <div
        class="titleName fl"
        v-html="companyName"
      >测试</div>
      <!-- 这里是弹框的右边 显示  通过  未通过  审核  -->
      <!-- 当传过来的tabNum ==0 的时候 加 status这个类   （点击的是 待审核 的时候）
          当穿过来的tabnum是  1  的时候  加   pass  这个类   （点击的是 已通过 的时候）
          当传过来的tabnum是  2 的时候  加  red这个  类   （点击的是 未通过 的时候）
      -->
      <div
        :class="{'fr':true,'status':tabNum==='1','pass':tabNum==='2','red':tabNum==='3'}"
        v-html="statusList[tabNum]"
      ></div>
      <!-- 这里的 statusList[tabNum] 显示的是弹框右上角的  蓝色的  还是  绿色的  还是红色的-->
    </div>
    <!-- 企业信息审核里面  未通过选项  里面的 详情   跳出来的弹出框-->
    <!-- <div style="padding:0;">
      
    </div>-->

    <!-- ======================================================================================= -->
    <!-- ====================================对公账户已通过未通过的图片部分显示 -->
    <!-- ====================================================================================== -->
    <!-- ====================================================================================== -->
    <!-- ====================================================================================== -->
    <!-- ====================================================================================== -->
    <!-- ====================================================================================== -->
    <!-- ======================================================================================= -->
    <div style="padding:0;">
      <div>
        <div class="title">基本信息</div>
        <ul class="info clearfix">
          <li>
            <div class="infoLabel">公司名称:</div>
            <div
              class="infoText"
              v-html="companyName"
            ></div>
          </li>
          <li>
            <div class="infoLabel">公司地址:</div>
            <div
              class="infoText"
              v-html="companyArea"
            ></div>
          </li>
          <!-- <li>
          <div class="infoLabel">所在地区:</div>
          <div class="infoText" v-html="baseInfo.cityname"></div>
          </li>-->
          <li>
            <div class="infoLabel">公司性质:</div>
            <div
              class="infoText"
              v-html="companyType"
            ></div>
          </li>
          <li>
            <div class="infoLabel">法人姓名:</div>
            <div
              class="infoText"
              v-html="legalperson"
            ></div>
          </li>
          <li>
            <div class="infoLabel">公司规模:</div>
            <div
              class="infoText"
              v-html="companyScale"
            ></div>
          </li>
          <li>
            <div class="infoLabel">所属行业:</div>
            <div
              class="infoText"
              v-html="industrytype"
            ></div>
          </li>

          <li>
            <div class="infoLabel">联系人:</div>
            <div
              class="infoText"
              v-html="linkman"
            ></div>
          </li>
          <li>
            <div class="infoLabel">联系电话:</div>
            <div
              class="infoText"
              v-html="telnum"
            ></div>
          </li>
          <li>
            <div class="infoLabel">企业联系电话:</div>
            <div
              class="infoText"
              v-html="telnum"
            ></div>
          </li>
          <li>
            <div class="infoLabel">企业邮箱:</div>
            <div
              class="infoText"
              v-html="companyemail"
            ></div>
          </li>
          <!-- 如果图片的数量大于0 的话就显示 -->
          <li v-show="imgDatas.length>0">
            <div class="infoLabel">企业风采:</div>
            <div class="infoText licenseimg1">
              <img
                v-for="item in imgDatas"
                :key="item"
                :src="checkPicture"
                @click="currentImgShow(1,item)"
                alt="企业风采"
                width="86px"
              />
            </div>
          </li>
          <!-- 对公账户审核  的  type  是  5  （所已不再这里显示） -->
          <!-- 当传过来的  type  为0 的时候显示平台注册时间-->
          <!-- socialList给这个 页面传过来的  type就是  0 -->
          <!-- 如果 v-show 是 type===“0”  的话  都是显示的是 企业列表页的 东西 -->
          <!-- 如果图片的数量大于0 的话就显示 -->

          <!-- 看被点击的这个是企业列表还是什么？ 如果是企业列表的话  就给他 宽度100% 这个样式 -->
          <li style="width: 100%">
            <div class="infoText licenseimg">
              <span class="infoLabel">营业执照:</span>
              <img
                :src="checkPicture"
                alt="营业执照"
                width="100px"
                height="92px"
                @click="isShowMyImg"
              />
            </div>
          </li>
        </ul>
        <!-- 这个组件 企业审核  优质企业   知名企业  都有   -->
        <div class="company-introduction clearfix:after">
          <div class="company-introduction-title fl">企业介绍:</div>
          <pre
            class="company-introduction-content fl"
            v-html="introduction"
          ></pre>
        </div>
      </div>
      <div
        v-if="tabNum==='1'"
        class="tabShow"
      >
        <div class="title">审核结果</div>
        <div style="height:80px;align-items: center;">
          <el-radio-group
            v-model="result"
            style="padding:0 20px"
            @change="resultChange"
          >
            <!-- 这个change事件的回调 是 选中的 Radio label 值-->
            <!-- 当这个回调参数的值 ===1 的时候 说明是通过的，所以上传的 remark 的值为空，
            如果这个回调参数的值 ===2 的时候，说明被驳回了，所以 会显示出 驳回的input框，然后把remark的值传回后台-->
            <el-radio
              class="one_el-radio"
              :label="'1'"
            >
              发放奖励积分额度为
              <el-input
                style="width:100px;text-align:center;padding:10px 10px;"
                v-model="jifen"
              ></el-input>积分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有效期
              <el-input
                style="width:100px;text-align:center;padding:10px 10px;"
                v-model="youxiaoqi"
              ></el-input>天
            </el-radio>
            <br />
            <el-radio :label="'2'">不予发放奖励积分</el-radio>
          </el-radio-group>
          <br />
          <el-input
            class="mg30"
            placeholder="备注 :"
            v-model="remark"
            style="width:400px"
          ></el-input>
        </div>
        <div class="btnBox">
          <el-button @click="cancel">取消</el-button>
          <!-- 提交的时候触发这个 submit 这个事件 -->
          <el-button
            type="primary"
            @click="submit"
          >提交</el-button>
        </div>
      </div>

      <!-- ========================== -->
      <!-- 加功能的审核结果部分内容 -->
      <!-- =========================== -->
      <!-- 当 传过来的tabNum为0 的时候才显示这个审核按钮 -->
      <!-- 当点击的是待审核 按钮的时候才会显示这个组件 -->

      <!-- =========================================================== -->
      <!-- 这里显示的是当点击的是企业信息的时候  然后点击详情按钮，  弹框的下半部分显示的  表头  是审核信息 -->
      <!-- 这里显示的是当点击的是优质企业信息的时候  然后点击详情按钮，  弹框的下半部分显示的  表头  是优质企业审核信息 -->
      <!-- 这里显示的是当点击的是知名企业信息的时候    弹框的下半部分显示的  表头  是知名企业审核信息 -->
      <div
        v-if="tabNum==='2'||tabNum==='3'||tabNum==='4'"
        class="tabShow"
      >
        <div class="title">审核信息</div>
        <!-- <ul
          class="info clearfix"
          v-show="tabNum === '2'"
        >
          <li>
            <div class="infoLabel">审核结果:</div>
            <div
              :class="{'infoText':true,'pass':tabNum==='1','red':tabNum==='2'}"
              v-html="statusList[tabNum]"
            ></div>
          </li>
          <li>
            <div class="infoLabel">审核人:</div>
            <div
              class="infoText"
              v-html="baseInfo.auditorname"
            ></div>
          </li>
          <li>
            <div class="infoLabel">审核时间:</div>
            {{+baseInfo.checkTime | formatDate}}
           
          </li>
          <li v-if="tabNum==='0'">
            <div class="infoLabel infoLabel_left">未通过原因:</div>

            <pre class="infoTexty">{{baseInfo.auditdate}}</pre>
          </li>
        </ul>-->
        <!-- =========================== -->
        <!-- 未通过详情里面的审核信息部分 -->
        <!-- ============================ -->
        <el-table
          :data="checkList2"
          border
          style="width: 80%; margin: 0 auto;"
        >
          <el-table-column
            align="center"
            prop="auditor"
            label="审核人"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="auditstatus"
            label="审核结果"
            width="180"
          >
            <template slot-scope="scope">{{ scope.row.status === '2' ? "发放"+ "(&nbsp;&nbsp;"+ bounty +"&nbsp;&nbsp;)"+"奖励积分,"+"有效期截止到"+ "(&nbsp;&nbsp;"+endTime+"&nbsp;&nbsp;)": "不予发放奖励积分" }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="checkTime"
            label="审核时间"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="cause"
            label="审核说明"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- ========================================================================================== -->
    <!-- ========================================================================================== -->
    <!-- ========================================================================================== -->
    <!-- ========================================================================================== -->
    <!-- ========================================================================================== -->
    <!-- ========================================================================================== -->
    <!-- ========================================================================================== -->
    <!-- ========================================================================================== -->
    <!-- 认证凭证 -->
    <el-dialog
      title="认证凭证"
      custom-class="bigImg"
      :visible.sync="rzdialogVisible"
      width="30%"
      append-to-body
    >
      <img
        :src="checkPicture"
        alt
        width="100%"
        height="100%"
      />
    </el-dialog>
    <!-- 营业执照的大图弹窗 -->
    <el-dialog
      title="营业执照"
      custom-class="bigImg"
      :visible.sync="leftdialogVisible"
      width="30%"
      append-to-body
    >
      <img
        :src="'data:image/png;base64,'+newLogoUrl"
        alt
        width="100%"
        height="100%"
        v-if="newLogoUrl"
      />
      <img
        :src="'data:image/png;base64,'+logoUrl"
        alt
        width="100%"
        height="100%"
        v-else
      />
    </el-dialog>
    <el-dialog
      title="原营业执照"
      custom-class="bigImg"
      :visible.sync="rightdialogVisible"
      width="30%"
      append-to-body
    >
      <img
        :src="'data:image/png;base64,'+logoUrl"
        alt
        width="100%"
        height="100%"
      />
    </el-dialog>
    <!-- 这个 弹窗是  优质认证和知名认证的 弹窗-->
    <el-dialog
      :title="currentTitle"
      custom-class="bigImg"
      :visible.sync="imgDialogVisible"
      width="30%"
      append-to-body
    >
      <!-- 这个src在下面的事件里面绑定了动态的图片路径 -->
      <img
        :src="currentUrl"
        alt
        width="100%"
        height="100%"
      />
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
const companyStatus = {
  0: "待审核",
  1: "审核通过",
  2: "审核不通过",
  3: "注销",
  4: "改名待审核",
  5: "注销待审核"
};
export default {
  name: "",
  data () {
    return {
      checkHuman: "",
      rzdialogVisible: false,
      leftdialogVisible: false,
      rightdialogVisible: false,
      result: "1",
      remark: "",
      baseInfo: {},
      statusList: {
        "1": "待审核",
        "2": "已通过",
        "3": "未通过"
      },
      logoUrl: "",
      newLogoUrl: "",
      currentTitle: "", //点击企业风采或认证---title
      currentUrl: "", //点击企业风采或认证---图片路径
      imgDialogVisible: false, //点击企业风采或认证---大图
      imgDatas: [],
      // imgDatas: [1, 2, 3, 4, 5, 6, 7, 8],
      yzImg: [],
      // 审核信息
      checkList2: [],
      companyScaleList: [],
      companyTypeList: [],
      jifen: "",
      youxiaoqi: ""
    };
  },
  // 从socialList传过来的   type 是‘0’ ， tabNum 是 ‘4’ ，
  // 从socialcheck传过来的    tabNum 分别是待审核  已通过  未通过   “0”  “1”  “2”
  // type 分别是1，2，3，5
  // companyName为 info对象里的companyname ，companyId为info对象里的companyId
  props: [
    "companyName", //
    "tabNum", //
    "companyId", //
    "checkPicture", //营业执照
    "companyArea", //公司地址
    "companyType", //企业类型
    "companyScale", //企业规模
    "linkman", //企业联系人名称
    "telnum", //企业联系人电话
    "buslicenseid", //营业执照附件编码
    "companyemail", //公司邮箱
    "legalperson", //法人姓名
    "linkphone", //座机
    "introduction", //企业介绍
    "logo", //企业logo
    "industrytype", //所属行业
    "bid" //奖励金的唯一标识id
  ],
  created () {
    if (this.tabNum == '2' || this.tabNum == '3') {
      this.basicInfor2()
    }
  },

  mounted () {
    this.checkHuman = localStorage
      .getItem("checkHuman")
      .toString()
      .replace(/"/g, "");
    console.log(this.checkHuman);

  },
  filters: {
    filterStatus (val) {
      return companyStatus[val];
    }
  },

  methods: {
    // ==================审核的   下面的   审核记录获取
    basicInfor2 () {
      this.$axios
        .post("/app/v1/BountyBack/selectAuditMessageDetails", {
          bid: this.bid
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 1) {
            let result = res.data.data;
            console.log(result)
            this.checkList2 = [result];
            this.bounty = result.bounty;
            this.endTime = result.bountyOfPeriod;
            console.log(this.checkList2)
          }
          else if (res.data.code === 119) {
            this.$message({
              message: "系统繁忙",
              type: "warning"
            });
          }
        });
    },
    // =========================================================
    // 新功能的方法
    // ==========================================================
    resultChange (r) {
      // 这个change事件的回调 是 选中的 Radio label 值
      // 当这个回调参数的值 ===1 的时候 说明是通过的，所以上传的 remark 的值为空，
      // 如果这个回调参数的值 ===2 的时候，说明被驳回了，所以 会显示出 驳回的input框，然后把remark的值传回后台
      if (r === "1") this.remark = "";
    },
    cancel () {
      this.$emit("cancelCheck", false);
    },
    // =============================================================================
    // 看传过来的type  是  left  还是  right   来决定显示的是左边的营业执照还是右边的原执照
    // ===============================================================================
    isShowImg (type) {
      if (type == "left") {
        this.leftdialogVisible = true;
      } else {
        this.rightdialogVisible = true;
      }
    },
    isShowMyImg () {
      this.rzdialogVisible = true;
    },
    // 审核的  提交按钮
    submit () {
      if (this.result == "2") {
        if (!this.remark.trim()) {
          this.$message({
            message: "备注不能为空",
            type: "warning"
          });
          return;
        }
      }
      if (this.result == "1") {
        if (!this.remark.trim()) {
          this.$message({
            message: "备注不能为空",
            type: "warning"
          });
          return;
        }
        if (!this.jifen.trim() && !this.youxiaoqi.trim()) {
          this.$message({
            message: "发放奖励积分和有效期不能为空",
            type: "warning"
          });
          return;
        }
      }

      this.$confirm("是否确定提交？", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          console.log("1111");
          let params = {
            bid: this.bid,
            bounty: this.jifen || "",
            bountyOfPeriod: this.youxiaoqi || "",
            status: this.result == "1" ? 2 : 3,
            auditor: this.checkHuman ? this.checkHuman : "李波",
            cause: this.remark
          };
          console.log(params)
          this.$axios
            .post("/app/v1/BountyBack/insertAuditMeaasge", params)
            .then(res => {
              console.log(res);
              if (res.data.message === "success.") {
                if (this.result === "1") {
                  this.$message({
                    message: "审核成功!",
                    type: "success"
                  });
                } else {
                  this.$message({
                    message: "申请已驳回!",
                    type: "warning"
                  });
                }
                this.cancel();
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
                this.cancel();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 获取json数据、
    getData () {
      this.$axios.get("../../../assets/condition1.json").then(res => {
        console.log(res);
        this.companyScaleList = res.data.companyRange;
        console.log(this.companyScaleList);
        this.companyTypeList = res.data.companyType;
        this.showCurrent();
      });
    }
  }
};
</script>
<style scoped >
.info li {
  float: left;
  /*width: 50%;*/
  padding: 10px 0;
}

.info li:first-child {
  width: 100%;
}

.info li:nth-child(2) {
  width: 100%;
}

li:nth-child(odd) {
  width: 50%;
}

li:nth-child(even) {
  width: 50%;
}

.info li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}

.info li .infoText {
  color: #404040;
  display: inline-block;
}

.info li .licenseimg1 {
  display: flex;
  flex-wrap: wrap;
}

.info li .licenseimg1 img {
  width: 86px;
  height: 86px;
  margin: 0 6px 6px 0;
}

.info li .infoLabel_left {
  float: left;
  line-height: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.info li .infoText_right {
  float: right;
  width: 482px;
  line-height: 19px;
}

.info li img {
  vertical-align: top;
}

.status {
  color: #0064e4 !important;
}

.pass {
  color: #19ae0e !important;
}

.red {
  color: #e60012 !important;
}

.btnBox {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.btnBox button {
  width: 120px;
  margin-right: 50px;
}

.company-introduction-content,
.infoTexty {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 20px;
}

.company-introduction-content {
  width: 80%;
}

.company-introduction-title {
  color: #999;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  line-height: 20px;
}

.company-introduction {
  overflow: hidden;
}

.tabShow {
  margin-top: 30px;
  height: 300px;
  padding-bottom: 20px;
}

.company-introduction-title1 {
  margin-top: 20px;
  padding: 10px 20px;
  border-top: 1px dashed #d2d2d2;
  font-size: 16px;
}

.company-introduction-title1 > span:first-child {
  float: left;
}

.company-introduction-title1 > span:last-child {
  float: right;
  color: #0064e4;
  cursor: pointer;
  border: 1px solid #0064e4;
  padding: 4px 6px;
}

.info1 li {
  float: left;
  /*width: 50%;*/
  padding: 10px 0;
}

.info1 li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}

.info1 li .infoText {
  color: #404040;
  display: inline-block;
}
.el-radio-group {
  margin-left: 20px;
  margin-top: -10px;
}
/* .el-radio{
    margin-top: 20px;
} */
.mg30 {
  margin: 20px 50px;
}
.one_el-radio {
  margin-top: 0;
}
</style>